<template>
  <div class="page-table">
    <twt-table
      v-bind="tableConf"
      :data-list="tableList"
      :list-count="total"
      :drop-col-arr="dropColArr"
      @handleSelect="(record) => $emit('handleSelect', record)"
      v-model:pageInfo="pageInfo"
    >
      <template #effectiveDate="{ row }">
        <div>{{ row.effectiveDate?.substring(0, 10) }}</div>
        <div>{{ row.effectiveDate?.substring(10, -1) }}</div>
      </template>
      <template #policyNameNo="{ row }">
        <div>{{ row.policyNameNo?.split('(')[0] }}</div>
        <div>{{ row?.policyNo }}</div>
      </template>
      <template #status="{ row }">
        <span>{{ state[row.status] }}</span>
      </template>
      <template #effectiveD="{ row }">
        <div>开始时间: {{ row.startDate }}</div>
        <div>结束时间: {{ row.endDate }}</div>
      </template>
      <template
        v-for="item in otherSlots"
        :key="item.slotName"
        #[item.slotName]="{ row }"
      >
        <slot :name="item.slotName" :row="row"></slot>
      </template>
    </twt-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import TwtTable from '@/base-ui/table'
import { pageOrigin } from '@/assets/common'

export default defineComponent({
  components: {
    TwtTable
  },
  props: {
    tableConf: {
      type: Object,
      default: () => ({})
    },
    state: {
      type: Array,
      required: true
    },
    dropColArr: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const deepFn = ref()
    const deepFormData = ref()
    const deepLoadingFunc = ref()
    // 分页
    const pageInfo = ref(pageOrigin)
    watch(pageInfo, () => {
      handleSearch(deepFn.value, deepFormData.value, deepLoadingFunc.value)
    })
    // 查询 重置
    const tableList = ref()
    const total = ref()
    const handleSearch = (fn: any, formData: any, loadingFunc: any) => {
      deepFn.value = fn
      deepFormData.value = formData
      deepLoadingFunc.value = loadingFunc
      fn({
        ...formData,
        ...pageInfo.value
      })
        .then((res: any) => {
          tableList.value = res.data.records
          total.value = res.data.total
        })
        .catch((err: any) => {
          console.log(err)
        })
        .finally(() => {
          loadingFunc()
        })
    }
    const handleRest = () => {
      pageInfo.value = pageOrigin
    }

    // 其他插槽处理
    const others = ['policyName', 'edit', 'daili'] // 不在本组件处理的插槽
    const otherSlots = props.tableConf.propList.filter((item: any) => {
      if (others.indexOf(item.slotName) > -1) return true
    })

    return {
      pageInfo,
      total,
      tableList,
      otherSlots,
      handleSearch,
      handleRest
    }
  }
})
</script>

<style scoped></style>
